<template>
    <div class="customerDetails">
        <el-card>
            <!-- <h2 v-if="pageType == 'create'">添加学员合同</h2>
            <h2 v-if="pageType == 'edit'">编辑学员合同</h2>
            <h2 v-if="pageType == 'details'">学员合同详情</h2> -->

            <el-form ref="form" :model="formData" :rules="rules" label-position="right" label-width="100px">
                <div class="form_wrap">
                    <h4>基础信息</h4>
                    <hr />
                    <div class="form_content">
                        <el-form-item label="学号" prop="sno" v-if="pageType != 'create'">
                            <el-input v-model="formData.sno" style="width: 218px;" placeholder="请填写学号" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="formData.name" placeholder="请填写姓名" style="width: 218px;"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="formData.email" placeholder="请填写邮箱" style="width: 218px;" @change="verifyCommonUnique('email')"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="formData.mobile" placeholder="请填写手机号" maxlength="11" style="width: 218px;"></el-input>
                        </el-form-item>
                        <el-form-item label="头像">
                            <template slot-scope="scope">
                                <div class="avatar_wrap">
                                    <el-upload
                                        :class="{'avatar-uploader': !imageUrl}"
                                        style="height: 40px;"
                                        :action="uploadFileURL"
                                        accept="image/jpeg,image/gif,image/png"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </template>
                        </el-form-item>
                        
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="formData.sex" placeholder="请选择性别">
                                <el-option
                                    v-for="item in sexData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="parseInt(item.value)">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="意向" prop="intention">
                            <el-input v-model="formData.intention" placeholder="请填写意向" style="width: 218px;"></el-input>
                        </el-form-item>
                        <el-form-item label="出生日期" prop="birthday">
                            <el-date-picker v-model="formData.birthday" type="date" placeholder="选择出生日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="英文名" prop="enname">
                            <el-input v-model="formData.enname" placeholder="请填写英文名"  style="width: 218px;"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人" prop="teacher_id">
                            <el-select v-model="formData.teacher_id" placeholder="请选择负责人">
                                <el-option
                                    v-for="item in teacherList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="助教" prop="tutor_id">
                            <el-select v-model="formData.tutor_id" placeholder="请选择助教">
                                <el-option
                                    v-for="item in teacherList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报名渠道" prop="source">
                            <!-- <el-input v-model="formData.source"></el-input> -->
                            <el-select v-model="formData.source" placeholder="请选择报名渠道">
                                <el-option
                                    v-for="item in sourceData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="parseInt(item.value)">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="创建时间"  v-if="pageType != 'create'">
                            <el-date-picker v-model="formData.create_time" type="datetime" placeholder="请选择创建时间" disabled></el-date-picker>
                        </el-form-item>
                        <el-form-item label="更新时间"  v-if="pageType != 'create'">
                            <el-date-picker v-model="formData.update_time" type="datetime" placeholder="请选择更新时间" disabled></el-date-picker>
                        </el-form-item>
                    </div>
                </div>
                <link-details :moduleData="moduleData" :formData="formData" @changeFormData="changeFormData"></link-details>
            </el-form>
            <el-form label-width="90px">
                <el-form-item >
                    <el-button @click="handleCancle">取消</el-button>
                    <el-button type="primary" @click="handleSubmit('customerManage')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import {changeTitleMinin,detailsMinin} from '@/mixin';
import {uploadFileURL} from '@/utils/url';
import http from '@/api/customer'
import globalApi from '@/api/global'
import {formatArray} from '@/utils'
import details from '@/components/details'

export default {
    name: 'customerDetails',
    mixins: [changeTitleMinin,detailsMinin],
    components: {
        linkDetails: details
    },
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            sourceData: [],
            sexData: [],
            teacherList: [],
            rules: {
                name: [
                    { required: true, message: '请填写姓名' }
                ],
                mobile: [
                    { required: true, message: '请填写手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号填写有误', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请填写邮箱' },
                    { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '邮箱填写有误', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别' },
                ],
                birthday: [
                    { required: true, message: '请选择出生日期' },
                ],
                source: [
                    { required: true, message: '请选择报名渠道' }
                ],
            },
            http: http,
            imageUrl: null,
            uploadFileURL,
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log('res, file:',res, file);
            this.formData['headimgurl'] = res.data;
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isPicture = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isPicture) {
            this.$message.error('上传头像图片只能是图片格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isPicture && isLt2M;
        },
        verifyCommonUnique(type){
            let data = {};
            data[type] = this.formData[type];
            globalApi.verifyCommonUnique(data,'student').then(res=>{
                // 调用主动验证
                // valid: false 为验证失败，已存在

            })
        },
        
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        
        getTeacher(){
            http.getTeacher().then(res => {
                console.log('getTeacherList:',res);
                this.teacherList = res.data;
            })
        },
        init(){
            let basicConfig = JSON.parse(sessionStorage.getItem('basicConfig'));
            console.log('basicConfig:',basicConfig);

            let sourceData = [];
            let keysData = Object.keys(basicConfig.source);
            if(keysData.length){
                keysData.map(item => {
                    sourceData.push({value: item,label: basicConfig.source[item].a})
                })
                //console.log('sourceData:',sourceData);
                this.sourceData = sourceData;
            }

            this.sexData = formatArray(basicConfig.sex);

            this.getPageParams('customerDetailsParams',()=>{
                this.getCommonModuleFields('student');
            });
        },
        
    },
    created(){
        this.getTeacher();
        this.init();
    }
}
</script>

<style lang="scss" scoped>
.customerDetails{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }

    .form_wrap{
        margin-bottom: 10px;
        h4{
            margin: 10px 0px;
        }
        hr{
            margin-bottom: 10px;
        }
        .form_content{
            display: flex;
            flex-wrap: wrap;
        }
    }

    .avatar_wrap{
        width: 218px;
        height: 100%;
        .avatar{
            border-radius: 100%;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
    }
}
</style>
<style  lang="scss">
.customerDetails{
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 16px;
        color: #8c939d;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .el-upload--text{
        height: 100%;
    }
    .avatar_wrap{
        width: 218px;
        height: 100%;
        .avatar{
            border-radius: 100%;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
        .avatar-uploader{
            height: 40px;
        }
    }
}
</style>